<template>
	<div class="app">
		<h1>时间戳是：{{time}}</h1>
		<h1>处理后的(methods实现)：{{dealTime()}}</h1>
		<h1>处理后的(computed实现)：{{time2}}</h1>
		<h1>处理后的(watch实现)：{{time3}}</h1>
		<h1>处理后的(filter实现)：{{time | chuli('YYYY年MM月DD日 A hh:mm:ss')}}</h1>
		<h1>处理后的(filter实现)：{{time | chuli('YYYY年MM月')}}</h1>
		<h1>处理后的(filter实现)：{{time | chuli('YYYY年MM月') | chuli2(4)}}</h1>
		<hr>
		<Person/>	
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import Person from './components/Person'

	export default {
		name:'App',
		components:{Person},
		data() {
			return {
				time:1218196800000,
				time3:''
			}
		},
		computed:{
			time2(){
				return dayjs(this.time).format('YYYY年MM月DD日 A hh:mm:ss')
			}
		},
		methods:{
			dealTime(){
				return dayjs(this.time).format('YYYY年MM月DD日 A hh:mm:ss')
			}
		},
		watch:{
			time:{
				immediate:true,
				handler(value){
					this.time3 = dayjs(value).format('YYYY年MM月DD日 A hh:mm:ss')
				}
			}
		},
		filters:{
			/* 
				fmtTime这个函数，何时调用？—— 有人使用该过滤器的时候
				fmtTime这个函数，会收到什么参数？—— 使用过滤器时传递的数据
				fmtTime这个函数，中的this是谁？—— undefined
			*/
			/* chuli(value,str){
				// console.log('@@',this,value)
				return dayjs(value).format(str)
			}, */
			chuli2(value,n){
				console.log(value)
				return value.slice(0,n)
			}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
</style>

